<template>
  <div class="article">
    <yg-background
      :imgStyle="{
        width: '100%',
        height: '368px',
        objectFit: 'cover'
      }"
      :imgSrc="articleDetails?.cover"
    >
      <template #default>
        <div class="yg_background_box">
          <div class="title">{{ articleDetails?.category_info?.title }}</div>
          <!-- <div class="content">22</div> -->
        </div>
      </template>
    </yg-background>
    <main class="main_box container">
      <!-- 左侧边栏 -->
      <aside class="aside_left hidden-xs">
        <yg-usercard />
        <yg-recommend class="visible-sm" style="margin-top: 12px" />
        <yg-tags class="visible-sm" style="margin-top: 12px" />
        <yg-catalog class="visible-sm" :id="id" :list="catalog" style="margin-top: 12px" />
      </aside>
      <!-- 内容 -->
      <section class="main_content">
        <div class="article_details">
          <div class="article_header">
            <h1 class="title">{{ articleDetails?.title ?? '标题' }}</h1>
            <div class="info">
              <div class="info_box1">
                <div class="info_item">
                  <img :src="require('@/assets/icons/icon_date_20@3x.png')" alt="" />
                  <span
                    >{{
                      $moment(articleDetails?.created_at).format('YYYY-MM-DD HH:mm:ss')
                    }}
                    发布</span
                  >
                </div>
                <div class="info_item" style="margin-left: 16px">
                  <img :src="require('@/assets/icons/icon_liulan_20@3x.png')" alt="" />
                  <span>{{ articleDetails?.browseCount }}</span>
                </div>
                <div class="info_item" style="margin-left: 16px">
                  <img :src="require('@/assets/icons/icon_pinglun_20@3x.png')" alt="" />
                  <span>{{
                    articleDetails?.commentList ? articleDetails?.commentList?.length : 0
                  }}</span>
                </div>
              </div>
              <div class="info_box2">
                <div class="info_item">
                  <span>分类:</span>
                  <ul class="list">
                    <li
                      class="item"
                      :style="{
                        backgroundColor: articleDetails?.category_info?.backgroundColor
                      }"
                      @click="$router.push(`/sort/${articleDetails?.category_id}`)"
                    >
                      {{ articleDetails?.category_info?.title }}
                    </li>
                  </ul>
                </div>
                <div class="info_item" style="margin-left: 16px">
                  <span>标签:</span>
                  <ul class="list" @click.stop="">
                    <li
                      class="item"
                      v-for="item in articleDetails?.tagsList"
                      :key="item?.id"
                      :style="{ backgroundColor: item?.backgroundColor }"
                      @click.stop="$router.push(`/tag/${item?.id}`)"
                    >
                      {{ item?.title }}
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="article_body">
            <div class="article_content" ref="ff" v-html="articleDetails?.content"></div>
          </div>
          <span class="article_footer">THE END</span>
        </div>
      </section>
      <!-- 右侧边栏 -->
      <aside class="aside_right hidden-xs hidden-sm">
        <yg-recommend />
        <yg-tags style="margin-top: 12px" />
        <yg-catalog :id="id" :list="catalog" style="margin-top: 12px" />
      </aside>
    </main>
    <yg-footer />
  </div>
</template>

<script>
export default {
  name: 'Article',
  props: ['id'],
  data() {
    return {
      catalog: null,
      articleDetails: null,
      articleList: [
        {
          id: 1,
          title: '文章标题1文章标题1文章标题1文章标题1文章标题1文章标题1文章标题1文章标题1',
          cover: require('@/assets/images/img_cover01.png'),
          category_id: 1,
          category_info: { id: 1, title: '学习笔记', backgroundColor: 'gold' },
          tagsList: [
            { id: 1, title: 'Vue', backgroundColor: 'brown' },
            { id: 2, title: 'React', backgroundColor: 'orange' },
            { id: 3, title: 'Axios', backgroundColor: 'blue' },
            { id: 4, title: '正则', backgroundColor: 'purple' }
          ],
          created_at: '2021-12-23T10:45:21+08:00',
          updated_at: '2021-12-24T11:33:44+08:00',
          release_at: '2021-12-24T11:33:44+08:00',
          commentList: [{}, {}, {}, {}],
          browseCount: 232,
          content: `
          <h1 style="text-align: justify;">H1标题1</h1>
          <p style="text-indent: 2em; text-align: justify;">段落1</p>
          <p style="text-indent: 2em; text-align: justify;">段落2</p>
          <p style="text-indent: 2em; text-align: justify;">
            <span style="text-align: justify; text-indent: 2em;">
              近几年，中国联通积极布局5G网络、数据中心等新基建，不断提升基础设施服务水平，努力打造数字经济创新发展新高地。5G与数据中心是工业互联网、人工智能发展的基础，所以对于电信运营商来说，他们在新基建中的责任可谓是十分重大的。
            </span>
          </p>
          <p style="text-indent: 2em; text-align: justify;">
            <span style="text-align: justify; text-indent: 2em;">
              中国移动也正在构建以5G、算力网络、智慧中台建设为重点的“连接+算力+能力”新基建，积极推动实现网络无所不达、算力无处不在。中国移动不仅要打造品质一流的5G精品网络还要精准建设全光千兆宽带网络，落实“东数西算“战略等。
            </span>
          </p>
          <h2 style="text-align: justify;">H2标题1</h2>
          <p style="text-indent: 2em; text-align: justify;">
            <span style="text-align: justify; text-indent: 2em;">
              受新冠肺炎疫情冲击与国际局部逆全球化趋势的影响，数字经济发展在未来经济发展中绝对是重要增长的部分。我们一定要搞好新基建，不断推进产业数字化进程，加速数字经济发展。
            </span>
          </p><p style="text-indent: 2em; text-align: justify;">段落1</p>
          <p style="text-indent: 2em; text-align: justify;">段落2</p>
          <h2 style="text-align: justify;">H2标题2</h2>
          <p style="text-indent: 2em; text-align: justify;">
            <span style="text-align: justify; text-indent: 2em;">
              近几年，中国联通积极布局5G网络、数据中心等新基建，不断提升基础设施服务水平，努力打造数字经济创新发展新高地。5G与数据中心是工业互联网、人工智能发展的基础，所以对于电信运营商来说，他们在新基建中的责任可谓是十分重大的。
            </span>
          </p>
          <h2 style="text-align: justify;">H2标题3</h2>
          <p style="text-indent: 2em; text-align: justify;">
            <span style="text-align: justify; text-indent: 2em;">
              中国移动也正在构建以5G、算力网络、智慧中台建设为重点的“连接+算力+能力”新基建，积极推动实现网络无所不达、算力无处不在。中国移动不仅要打造品质一流的5G精品网络还要精准建设全光千兆宽带网络，落实“东数西算“战略等。
            </span>
          </p>
          <h1 style="text-align: justify;">标题</h1>
          <h2 style="text-align: justify;">H2标题1</h2>
          <p style="text-indent: 2em; text-align: justify;">
            <span style="text-align: justify; text-indent: 2em;">
              受新冠肺炎疫情冲击与国际局部逆全球化趋势的影响，数字经济发展在未来经济发展中绝对是重要增长的部分。我们一定要搞好新基建，不断推进产业数字化进程，加速数字经济发展。
            </span>
          </p>`
        },
        {
          id: 2,
          title: '协助数字新基建，协助数字经济',
          cover: require('@/assets/images/img_cover02.png'),
          category_id: 2,
          category_info: {
            id: 2,
            title: '个人项目',
            backgroundColor: 'purple'
          },
          tagsList: [
            { id: 5, title: '拖拽', backgroundColor: 'blue' },
            { id: 6, title: '测', backgroundColor: 'red' },
            { id: 7, title: '试', backgroundColor: 'black' }
          ],
          created_at: '2021-12-26T10:45:21+08:00',
          updated_at: '2022-12-26T11:33:44+08:00',
          release_at: '2022-12-26T11:33:44+08:00',
          commentList: [{}, {}, {}, {}],
          browseCount: 322,
          content: `<h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;">我们知道长三角地区是我国经济发展最活跃的地区之一。2022年上半年的数据显示，数字经济在整个地区的经济里占非常重要的地位。要发展数字经济必然离不开新型信息基础设施的助力。</p><p style="text-indent: 2em; text-align: justify;">首先，新型基础设施建设主要包括两方面，一是包括5G、特高压、人工智能、工业互联网等在内的通信网络基础设施；二是新技术，比如城际高速铁路和城际轨道交通、大数据中心、新能源汽车充电桩等新型智慧基建。</p><p style="text-align: center;"></p><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">近几年，中国联通积极布局5G网络、数据中心等新基建，不断提升基础设施服务水平，努力打造数字经济创新发展新高地。5G与数据中心是工业互联网、人工智能发展的基础，所以对于电信运营商来说，他们在新基建中的责任可谓是十分重大的。</span></p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">中国移动也正在构建以5G、算力网络、智慧中台建设为重点的“连接+算力+能力”新基建，积极推动实现网络无所不达、算力无处不在。中国移动不仅要打造品质一流的5G精品网络还要精准建设全光千兆宽带网络，落实“东数西算“战略等。</span></p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">受新冠肺炎疫情冲击与国际局部逆全球化趋势的影响，数字经济发展在未来经济发展中绝对是重要增长的部分。我们一定要搞好新基建，不断推进产业数字化进程，加速数字经济发展。</span></p>`
        },
        {
          id: 3,
          title: '文章标题3',
          cover: require('@/assets/images/img_cover03.png'),
          category_id: 2,
          category_info: {
            id: 2,
            title: '个人项目',
            backgroundColor: 'purple'
          },
          tagsList: [{ id: 8, title: 'antd', backgroundColor: 'violet' }],
          created_at: '2022-02-07T10:45:21+08:00',
          updated_at: '2022-02-07T11:33:44+08:00',
          release_at: '2022-02-07T11:33:44+08:00',
          commentList: [{}, {}, {}, {}],
          browseCount: 236,
          content: `<h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;">我们知道长三角地区是我国经济发展最活跃的地区之一。2022年上半年的数据显示，数字经济在整个地区的经济里占非常重要的地位。要发展数字经济必然离不开新型信息基础设施的助力。</p><p style="text-indent: 2em; text-align: justify;">首先，新型基础设施建设主要包括两方面，一是包括5G、特高压、人工智能、工业互联网等在内的通信网络基础设施；二是新技术，比如城际高速铁路和城际轨道交通、大数据中心、新能源汽车充电桩等新型智慧基建。</p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-align: center;"></p><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">近几年，中国联通积极布局5G网络、数据中心等新基建，不断提升基础设施服务水平，努力打造数字经济创新发展新高地。5G与数据中心是工业互联网、人工智能发展的基础，所以对于电信运营商来说，他们在新基建中的责任可谓是十分重大的。</span></p><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">中国移动也正在构建以5G、算力网络、智慧中台建设为重点的“连接+算力+能力”新基建，积极推动实现网络无所不达、算力无处不在。中国移动不仅要打造品质一流的5G精品网络还要精准建设全光千兆宽带网络，落实“东数西算“战略等。</span></p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">受新冠肺炎疫情冲击与国际局部逆全球化趋势的影响，数字经济发展在未来经济发展中绝对是重要增长的部分。我们一定要搞好新基建，不断推进产业数字化进程，加速数字经济发展。</span></p>`
        },
        {
          id: 4,
          title: '文章标题4',
          cover: require('@/assets/images/img_cover04.png'),
          category_id: 1,
          category_info: { id: 1, title: '学习笔记', backgroundColor: 'gold' },
          tagsList: [
            { id: 9, title: '正则', backgroundColor: 'green' },
            { id: 10, title: '表达式', backgroundColor: 'teal' }
          ],
          created_at: '2022-05-07T10:45:21+08:00',
          updated_at: '2022-05-08T11:33:44+08:00',
          release_at: '2022-05-08T11:33:44+08:00',
          commentList: [{}, {}, {}, {}],
          browseCount: 236,
          content: `<h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;">我们知道长三角地区是我国经济发展最活跃的地区之一。2022年上半年的数据显示，数字经济在整个地区的经济里占非常重要的地位。要发展数字经济必然离不开新型信息基础设施的助力。</p><p style="text-indent: 2em; text-align: justify;">首先，新型基础设施建设主要包括两方面，一是包括5G、特高压、人工智能、工业互联网等在内的通信网络基础设施；二是新技术，比如城际高速铁路和城际轨道交通、大数据中心、新能源汽车充电桩等新型智慧基建。</p><p style="text-align: center;"></p><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">近几年，中国联通积极布局5G网络、数据中心等新基建，不断提升基础设施服务水平，努力打造数字经济创新发展新高地。5G与数据中心是工业互联网、人工智能发展的基础，所以对于电信运营商来说，他们在新基建中的责任可谓是十分重大的。</span></p><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">中国移动也正在构建以5G、算力网络、智慧中台建设为重点的“连接+算力+能力”新基建，积极推动实现网络无所不达、算力无处不在。中国移动不仅要打造品质一流的5G精品网络还要精准建设全光千兆宽带网络，落实“东数西算“战略等。</span></p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">受新冠肺炎疫情冲击与国际局部逆全球化趋势的影响，数字经济发展在未来经济发展中绝对是重要增长的部分。我们一定要搞好新基建，不断推进产业数字化进程，加速数字经济发展。</span></p>`
        },
        {
          id: 5,
          title: '文章标题5',
          cover: require('@/assets/images/img_cover05.png'),
          category_id: 3,
          category_info: { id: 3, title: '随心记', backgroundColor: 'pink' },
          tagsList: [{ id: 1, title: 'Vue', backgroundColor: 'brown' }],
          created_at: '2022-12-07T10:45:21+08:00',
          updated_at: '2022-12-08T11:33:44+08:00',
          release_at: '2022-12-08T11:33:44+08:00',
          commentList: [{}, {}, {}, {}],
          browseCount: 236,
          content: `<h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;">我们知道长三角地区是我国经济发展最活跃的地区之一。2022年上半年的数据显示，数字经济在整个地区的经济里占非常重要的地位。要发展数字经济必然离不开新型信息基础设施的助力。</p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;">首先，新型基础设施建设主要包括两方面，一是包括5G、特高压、人工智能、工业互联网等在内的通信网络基础设施；二是新技术，比如城际高速铁路和城际轨道交通、大数据中心、新能源汽车充电桩等新型智慧基建。</p><p style="text-align: center;"></p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">近几年，中国联通积极布局5G网络、数据中心等新基建，不断提升基础设施服务水平，努力打造数字经济创新发展新高地。5G与数据中心是工业互联网、人工智能发展的基础，所以对于电信运营商来说，他们在新基建中的责任可谓是十分重大的。</span></p><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">中国移动也正在构建以5G、算力网络、智慧中台建设为重点的“连接+算力+能力”新基建，积极推动实现网络无所不达、算力无处不在。中国移动不仅要打造品质一流的5G精品网络还要精准建设全光千兆宽带网络，落实“东数西算“战略等。</span></p><h1 style="text-align: justify;">H1标题</h1><h2 style="text-align: justify;">H2标题</h2><p style="text-indent: 2em; text-align: justify;"><span style="text-align: justify; text-indent: 2em;">受新冠肺炎疫情冲击与国际局部逆全球化趋势的影响，数字经济发展在未来经济发展中绝对是重要增长的部分。我们一定要搞好新基建，不断推进产业数字化进程，加速数字经济发展。</span></p>`
        }
      ]
    }
  },
  watch: {
    id: {
      handler() {
        this.articleDetails =
          this.articleList[this.articleList.map((m) => m?.id).indexOf(this.id - 0)]
        this.getTitle()
      },
      immediate: true
    }
  },
  methods: {
    getTitle() {
      // 生成目录
      this.$nextTick(() => {
        // 根据之前设置的ref来获取文章的小标题
        const article_content = this.$refs.ff //这里的ff改成你具体设置的
        // 想获取的标题，将想获取的小标题的标签添加到这
        const titleTag = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6']
        //存放小标题的数组
        let titles = []
        article_content.childNodes.forEach((e, index) => {
          //具体执行步骤，比如：打印看看
          // console.log(e, index);
          if (titleTag.includes(e.nodeName)) {
            //具体封装过程
            // console.log(e.nodeName);
            const id = 'yg_content_' + index
            // 设置元素id
            e.setAttribute('id', id)
            titles.push({
              id: id,
              title: e.innerHTML,
              level: Number(e.nodeName.substring(1, 2)),
              nodeName: e.nodeName,
              //read：后期主要用来判断当前阅读的是哪一个小标题的内容
              read: false
            })
          }
        })
        //再data中定义catalog
        this.catalog = titles
        // console.log("目录", this.catalog);
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.article {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f9f9f9;
  & > .main_box {
    flex: 1;
    display: flex;
    flex-direction: row;
    padding: 16px 0;
    min-width: 320px;
    & > .aside_left,
    & > .aside_right {
      display: flex;
      flex-direction: column;
      min-width: 220px;
      max-width: 220px;
    }
    & > .main_content {
      display: flex;
      flex-direction: column;
      margin: 0 12px;
      width: 100%;
      overflow: hidden;
      & > .article_details {
        display: flex;
        flex-direction: column;
        padding: 32px 16px;
        width: 100%;
        background-color: #fff;
        border-radius: 4px;
        overflow: hidden;
        & > .article_header {
          display: flex;
          flex-direction: column;
          padding-bottom: 16px;
          border-bottom: 1px solid #eaeaea;
          & > .title {
            margin: 0;
            font-size: 24px;
            font-weight: 500;
            color: #171717;
            line-height: 30px;
            text-align: justify;
          }
          & > .info {
            display: flex;
            flex-direction: column;
            margin-top: 12px;
            width: 100%;
            & > .info_box1 {
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              align-items: center;
              width: 100%;
              & > .info_item {
                display: flex;
                flex-direction: row;
                align-items: center;
                user-select: none;
                cursor: default;
                & > img {
                  min-width: 20px;
                  width: 20px;
                  height: 20px;
                }
                & > span {
                  margin-left: 4px;
                  font-size: 14px;
                  font-weight: 400;
                  color: #999;
                  line-height: 22px;
                }
              }
            }
            & > .info_box2 {
              display: flex;
              flex-direction: row;
              margin-top: 8px;
              width: 100%;
              & > .info_item {
                display: flex;
                flex-direction: row;
                & > span {
                  margin-top: 2px;
                  font-size: 14px;
                  font-weight: 400;
                  color: #999;
                  line-height: 22px;
                  white-space: nowrap;
                  user-select: none;
                  cursor: default;
                }
                & > .list {
                  flex: 1;
                  display: flex;
                  flex-direction: row;
                  flex-wrap: wrap;
                  background-color: #fff;
                  & > .item {
                    margin: 3px;
                    padding: 4px 12px;
                    height: max-content;
                    border-radius: 4px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #fff;
                    line-height: 12px;
                    user-select: none;
                    white-space: nowrap;
                  }
                }
              }
            }
          }
        }
        & > .article_body {
          display: flex;
          flex-direction: column;
          & > .article_content {
            padding: 16px 0;
            color: #333;
          }
        }
        & > .article_footer {
          display: flex;
          align-items: center;
          font-size: 14px;
          font-weight: 400;
          color: #666;
          line-height: 22px;
          white-space: nowrap;
          &::before {
            content: '';
            display: block;
            margin-right: 8px;
            width: 100%;
            height: 1px;
            background-color: #eaeaea;
            overflow: hidden;
          }
          &::after {
            content: '';
            display: block;
            margin-left: 8px;
            width: 100%;
            height: 1px;
            background-color: #eaeaea;
            overflow: hidden;
          }
        }
      }
    }
  }
}
@media (max-width: 768px) {
  .main_box {
    margin: 0;
    padding: 0 !important;
    width: 100vw !important;
    & > .main_content {
      margin: 0 !important;
    }
  }
}
</style>
